<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('实名认证')}}</header-view>
		<view class="content" v-if="isAuth">
			<view class="top flex_center">
				<image class="img" src="../../static/img/status.png" mode="widthFix"></image>
			</view>
			<view class="list flex_between">
				<view class="name">{{$t('真实姓名')}}</view>
				<view>{{info.name}}</view>
			</view>
			<view class="list flex_between">
				<view class="name">{{$t('身份证号')}}</view>
				<view>{{info.cardno}}</view>
			</view>
		</view>
		<view class="content" v-else>
			<view class="item flex">
				<view class="name flex">{{$t('姓名：')}}</view>
				<u--input :placeholder="$t('请输入姓名')" border="none" v-model="name" type="text" color="#fff"
					placeholderStyle="{color:'grey'}"></u--input>
			</view>
			<view class="item flex">
				<view class="name flex">{{$t('证件号：')}}</view>
				<u--input :placeholder="$t('请输入证件号')" border="none" v-model="cardno" type="number" color="#fff"
					placeholderStyle="{color:'grey'}"></u--input>
			</view>
			<view class="item flex">
				<view class="name flex">{{$t('性别：')}}</view>
				<view class="flex">
					<view class="value_item" :class="sex==1?'active_item':''" @tap="changeTab(1)">{{$t('男')}}</view>
					<view class="value_item" :class="sex==2?'active_item':''" @tap="changeTab(2)">{{$t('女')}}</view>
				</view>
			</view>
			<view class="item image_box">
				<view class="name">{{$t('正面照：')}}</view>
				<view class="upload_box">
					<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1" width="330"
						height="200">
						<image src="../../static/img/2.png" mode="widthFix" style="width: 660rpx;height: 400rpx;">
						</image>
					</u-upload>
				</view>
			</view>
			<view class="item image_box">
				<view class="name">{{$t('背面照：')}}</view>
				<view class="upload_box">
					<u-upload :fileList="fileList2" @afterRead="afterRead" name="2" multiple :maxCount="1" width="330"
						height="200">
						<image src="../../static/img/1.png" mode="widthFix" style="width: 660rpx;height: 400rpx;">
						</image>
					</u-upload>
				</view>
			</view>
			<view class="item flex">
				<view class="name flex">{{$t('有效时间：')}}</view>
				<view class="time" @tap="chooseTime">{{$u.timeFormat(this.time, 'yyyy-mm-dd')}}</view>
			</view>
			<u-button class="submit" :text="$t('提交')" @tap="submit"></u-button>
		</view>
		<u-datetime-picker :maxDate="4786778555000" :show="show" v-model="time" mode="date" :cancelText="$t('取消')"
			:confirmText="$t('确认')" @close="show=false" @confirm="setTime" confirmColor="#4c3d89"></u-datetime-picker>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		authinfoApi,
		authaddApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				info: {},
				isAuth: false,
				name: "",
				cardno: "",
				sex: 1,
				fileList1: [],
				fileList2: [],
				baseUrl: "",
				show: false,
				time: new Date().getTime()
			};
		},
		onLoad() {
			this.baseUrl = uni.getStorageSync("baseUrl")
			this.getInfo()
		},
		methods: {
			getInfo() {
				authinfoApi().then(res => {
					console.log(res.data)
					if (res.data.data.length == 0) {
						this.isAuth = false
					} else {
						this.isAuth = true
						this.info = res.data.data
					}
				})
			},
			changeTab(key) {
				if (this.sex == key) {
					return
				}
				this.sex = key
			},
			submit() {
				console.log(this.fileList1)
				if (this.name == "") {
					uni.$u.toast(this.$t('请输入姓名'))
					return
				}
				if (this.cardno == "") {
					uni.$u.toast(this.$t('请输入证件号'))
					return
				}
				if (this.fileList1.length == 0) {
					uni.$u.toast(this.$t('请上传正面照'))
					return
				}
				if (this.fileList2.length == 0) {
					uni.$u.toast(this.$t('请上传背面照'))
					return
				}
				let time = uni.$u.timeFormat(this.time, 'yyyy-mm-dd');
				authaddApi({
					name: this.name,
					cardno: this.cardno,
					sex: this.sex,
					validity: time,
					zimage: this.fileList1[0].upload,
					fimage: this.fileList2[0].upload
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.getInfo()
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: this.$t('上传中')
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fullurl,
						upload: result.url,
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl + "/api/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log(JSON.parse(res.data))
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						}
					});
				})
			},
			chooseTime() {
				this.show = true
			},
			setTime(e) {
				// console.log(e, this.time)
				this.time = e
				// uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-popup__content {
		background: #1f2039 !important;

		.u-picker__view__column__item {
			color: #fff;
		}

		.uni-picker-view-mask {
			background: transparent;
		}
	}

	.container {
		.content {
			padding: 0 24rpx;

			.top {
				width: 100%;
				height: 390rpx;
				border-bottom: 1rpx solid #1e1f39;

				.img {
					width: 154rpx;
				}
			}

			.list {
				height: 110rpx;
				border-bottom: 1rpx solid #1e1f39;
				padding: 0 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999;
			}

			.item {
				height: 100rpx;
				background: #1f2039;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 0 20rpx;

				.name {
					width: 180rpx;
					height: 100rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fefefe;
				}

				.time {
					font-size: 32rpx;
					font-weight: 400;
					color: #fefefe;
				}

				.u-input {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
				}

				.value_item {
					height: 100rpx;
					background: #1f2039;
					padding: 0 40rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(236, 231, 227, .6);
					line-height: 100rpx;
				}

				.active_item {
					background: rgba(76, 61, 137, .35);
					color: #ece7e3;
				}
			}

			.image_box {
				height: auto;
				padding: 20rpx;

				.name {
					height: auto;
					margin-bottom: 20rpx;
				}
			}

			.submit {
				height: 88rpx;
				background: #4c3d89;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #fff;
				margin-top: 66rpx;
				border: none;
			}
		}
	}
</style>